<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flexleft">
			<div :class="tabActive==item.id?'active margin_right3 pointer':'noActive margin_right3 pointer'"
				v-for="(item,index) in tabList" :key="index" @click="tabActive=item.id">
				{{item.name}}
			</div>
		</div>
		<!-- 列表 -->
		<template v-if="tabActive==1">
			<div class="contentBox mainpadding margin_top" v-for="item in list.data" :key="item.id">
				<div class="text_ft color_three">{{item.lesson_name}}</div>
				<div class="flexbetween margin_top2">
					<div>
						<div class="flexleft">
							<div class="text_ft color_theme margin_right1">· </div>
							<div class="text_d color_nine">开始时间：</div>
							<div class="text_d color_three">{{item.starttime_text}}</div>
						</div>
						<div class="flexleft margin_top2">
							<div class="text_ft color_red margin_right1">· </div>
							<div class="text_d color_nine">结束时间：</div>
							<div class="text_d color_red">剩余{{returnFen(item.endtime*1000 - item.starttime*1000,item.duration*60*1000)}}</div>
						</div>
					</div>
					<div class="themeBtn"  v-if="returnShowbtn(item.endtime*1000 - item.starttime*1000)" @click="jixuks(item)">继续考试</div>
				</div>
			</div>
		</template>
		<template v-if="tabActive==2">
			<div class="contentBox mainpadding margin_top pointer" v-for="item in list.data" :key="item.id" @click="chakansj(item)">
				<div class="text_ft color_three">{{item.lesson_name}}</div>
				<div class="flexbetween margin_top2">
					<div>
						<div class="flexleft">
							<div class="text_ft color_theme margin_right1">· </div>
							<div class="text_d color_nine">开始时间：</div>
							<div class="text_d color_three">{{item.starttime_text}}</div>
						</div>
						<div class="flexleft margin_top2">
							<div class="text_ft color_red margin_right1">· </div>
							<div class="text_d color_nine">结束时间：</div>
							<div class="text_d color_red">{{item.endtime_text}}</div>
						</div>
						<div class="flexleft margin_top2">
							<div class="text_ft color_orange margin_right1">· </div>
							<div class="text_d color_nine">提交老师：</div>
							<div class="text_d color_three">李老师</div>
						</div>
					</div>
					<div class="text_ht color_orange" v-if="item.state==2">改卷中</div>
					<div class="fractionBox" v-else>
						{{item.result_score}}<span class="text_b">分</span>
					</div>
				</div>
			</div>
		</template>
		<template v-if="tabActive==3">
			<div class="contentBox mainpadding margin_top pointer" v-for="item in list.data" :key="item.id" @click="chakansj(item)">
				<div class="text_ft color_three">{{item.lesson_name}}</div>
				<div class="flexbetween margin_top2">
					<div>
						<div class="flexleft">
							<div class="text_ft color_theme margin_right1">· </div>
							<div class="text_d color_nine">开始时间：</div>
							<div class="text_d color_three">{{item.starttime_text}}</div>
						</div>
						<div class="flexleft margin_top2">
							<div class="text_ft color_red margin_right1">· </div>
							<div class="text_d color_nine">结束时间：</div>
							<div class="text_d color_red">{{item.endtime_text}}</div>
						</div>
					</div>
					<div class="text_ht color_orange" v-if="item.state==2">改卷中</div>
					<div class="fractionBox" v-else>
						{{item.result_score}}<span class="text_b">分</span>
					</div>
				</div>
			</div>
		</template>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		examination_list
	} from "@/API/examination"
	export default {
		data() {
			return {
				tabActive: 1,
				tabList: [{
					name: "考试中",
					id:1
				}, {
					name: "已提交",
					id:2
				}, {
					name: "未提交",
					id:3
				}],
				page:1,
				list:{
					data:[]
				}
			}
		},
		watch:{
			tabActive(){
				this.tuijianchange(1)
			}
		},
		created() {
			this.init()
		},
		methods:{
			chakansj(item){
				let data = {
					education_lesson_id:item.education_lesson_id,
					student_examination_id:item.id
				}
				this.$router.push({
					path:"/endText",
					query:data,
				})
			},
			init(page) {
				examination_list	({
					page: page || 1,
					state: this.tabActive == 3 ? 2 : this.tabActive,
					is_choose_teacher: this.tabActive == 3 ? 0 : this.tabActive == 1 ? 0 : 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			jixuks(item){
				let data = {
					education_lesson_id:item.education_lesson_id,
					student_examination_id:item.id,
					duration:this.returnduration(item.endtime*1000 - item.starttime*1000,item.duration*60*1000)
				}
				this.$router.push({
					path:"/testing",
					query:data,
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
			returnduration(val1, val2) {
				let fen = (Number(val2) - Number(val1)) / 1000 / 60
				return fen
			},
			returnShowbtn(val1) {
				if(val1>0){
					return true
				}else{
					return false
				}
			},
			returnFen(val1, val2) {
				let fen = (Number(val2) - Number(val1)) / 1000
				return this.MillisecondToDate(fen)
			},
			MillisecondToDate(mss) {
				let d = parseInt(mss / 60 / 60 / 24)
				let h = parseInt(mss / 60 / 60 % 24)
				let m = parseInt(mss / 60 % 60)
				let s = parseInt(mss % 60)
				let tian = d?d+"天":""
				let shi = h?h+"小时":""
				let fen = m?m+"分":""
				return tian + shi + fen +s+"秒";
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	.contentBox {
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}

	.fractionBox {
		font-size: 31px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
	}
</style>